<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>register</title>
	<meta name="renderer" content="webkit">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">	
	<meta name="apple-mobile-web-app-capable" content="yes">	
	<meta name="format-detection" content="telephone=no">	
	<!-- load css -->
	<link rel="stylesheet" type="text/css" href="../style/common/layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="../style/css/login.css" media="all">
</head>
<body>
<div class="layui-canvs"></div>
<div class="layui-layout layui-layout-login">
	<h1>
		 <strong>欢迎注册</strong>
		 <em>Management System</em>
	</h1>
    <form action="#"  method="post" enctype="multipart/form-data">
        <%--用户名--%>
        <div class="layui-user-icon larry-login" style="height: 45px;">
            <div class="layui-code-box">
                <input type="text" id="adminName" name="adminName"  placeholder="用户名" class="login_txtbx"/>
            </div>
        </div>
        <label id="adminNameId"></label>

        <%--密码--%>
        <div class="layui-pwd-icon larry-login">
            <div class="layui-code-box">
                <input type="password" id="adminPwd" name="adminPwd" placeholder="密码" class="login_txtbx"/>
            </div>
        </div>
        <label id="adminPwdId"></label>

        <%-- 确认密码--%>
        <div class="layui-pwd-icon larry-login">
            <div class="layui-code-box">
                <input type="password" id="rePwd" name="rePwd" placeholder="确认密码" class="login_txtbx"/>
            </div>
        </div>
        <label id="rePwdId"></label>

        <%--头像--%>
        <div class="layui-user-icon larry-login">
            <div class="layui-code-box">
                <input type="file" id="adminImg" name="adminImg" placeholder="头像" class="login_txtbx"/>
            </div>
        </div>
        <label id="adminImgId"></label>

        <%--验证码--%>
        <div class="layui-val-icon larry-login">
            <input type="text" id="ucheck" name="ucheck" placeholder="验证码" maxlength="4" class="login_txtbx" style="width: 229px;height: 45px;float: left;">
            <img style="height: 45px;" id="checkCode" src="${pageContext.request.contextPath}/AdminController/createCode">
        </div>
        <label id="ucheckId"></label>

        <div class="layui-submit larry-login">
            <button type="button" id="register" name="register"  class="submit_btn">立即注册</button>
        </div>
        <label id="regerror"></label>

    </form>
    <div class="layui-login-text">
    	<a href="${pageContext.request.contextPath}/admin/adminLogin.jsp">已有账号?去登录</a>
        <p>© 2020-8 旅游管理平台</p>
    </div>
</div>
<script type="text/javascript" src="../style/common/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="../style/js/login.js"></script>
<script type="text/javascript" src="../style/jsplug/jparticle.jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //页面样式
            $(".layui-canvs").jParticle({
                background: "#141414",
                color: "#E6E6E6"
            });

            //注册
            $("#register").click(function () {
                alert("123");
                if($("#adminNameId").html().trim()=="可用" && $("#rePwdId").html()=="两次密码一致"){
                    alert("456");
                    $.ajax({
                        url:"${pageContext.request.contextPath}/AdminController/register",
                        Type:"POST",
                        data:{adminName:$("#adminName").val(),adminPwd:$("#adminPwd").val(),adminImg:$("#adminImg").val()},
                        success:function (flag) {
                            if(flag=="false"){
                                $("#regerror").html("注册失败,请重试~~");
                            }else{
                                $("#adminNameId").html("");
                                $("#adminPwdId").html("");
                                $("#rePwdId").html("");
                                $("#ucheckId").html("");
                            }
                        }
                    })
                }
            });



            //验证用户名
            $("#adminName").blur(function () {
                $.ajax({
                    url:"${pageContext.request.contextPath}/AdminController/checkName",
                    Type:"POST",
                    data:{adminName:$("#adminName").val()},
                    dataType:"text",
                    success:function (messagse) {
                        if(messagse==""){
                            if($("#adminName").val().trim()!=""){
                                $("#adminNameId").html("可用");
                                $("#adminNameId").attr("style","color:green")
                            }
                        }else{
                            $("#adminNameId").html(messagse);
                            $("#adminNameId").attr("style","color:red")
                        }
                    }
                })
            });

            //判断密码  >6 不能包含空格
            $("#adminPwd").blur(function(){
                if( $("#adminPwd").val().trim().length>=6  &&  $("#adminPwd").val().trim().indexOf(" ")== -1){
                    $("#adminPwdId").html("正确");
                    $("#adminPwdId").attr("style","color:green")
                }else{
                    $("#adminPwdId").html("密码长度大于6,不能包含空格");
                    $("#adminPwdId").attr("style","color:red")
                }
            });

            //确认密码
            $("#rePwd").blur(function(){
                var upwd=$("#adminPwd").val();
                var uprewd=$("#rePwd").val();
                if(upwd==uprewd){
                    $("#rePwdId").html("两次密码一致");
                    $("#rePwdId").attr("style","color:green")
                }else{
                    $("#rePwdId").html("两次密码不一致");
                    $("#rePwdId").attr("style","color:red")
                }
            });

            //验证码
            $("#ucheck").blur(function(){
                //判断用户名是否为空
                if( $("#ucheck").val().trim()==""){

                    $("#ucheckId").html("验证码不能为空");
                    $("#ucheckId").attr("style","color:red");

                }else{
                    $.post("${pageContext.request.contextPath }/AdminController/checkCode",{checkNum: $("#ucheck").val()},function(data){
                        //把返回来的数据显示在提示标签上
                        $("#ucheckId").html(data);
                    })
                }
            });

        });

        //验证码刷新
        window.onload=function(){
            //获取图片对象
            var img=document.getElementById("checkCode");
            //绑定单击事件
            img.onclick=function(){

                //加时间戳
                var date=new Date().getTime();
                img.src="${pageContext.request.contextPath}/AdminController/createCode?"+date;  //时间戳永不重复
            }

        }
    </script>
</body>
</html>